<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>优菜商城</title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<meta name="author" content="@binggan" />
		<link rel="stylesheet" href="css/ydui.css" />
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_463779_pkv3jpw5yz1fko6r.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<script src="js/flexible.js"></script>
	</head>

	<body>
		<section class="g-flexview">
			<header class="m-navbar index-navbar border-bot">
				<a href="#" class="navbar-item back">
					<i class="back-ico"></i>
				</a>
				<div class="navbar-center">
					<span class="navbar-title">商品详情页</span>
				</div>
				<div class="navbar-item">
					<a href="index.html">首页</a>
				</div>
			</header>
			<div class="g-scrollview">
				<!--商品详情块-->
				<div class="swiper-container detail-img-box">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="images/detail.png" alt="商品图片" /></div>
						<div class="swiper-slide"><img src="images/detail.png" alt="商品图片2" /></div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
				<div class="detail-intro-box white-bg">
					<div class="detail-intro-top">
						<div class="commodity-name">
							<p>黄心土豆 500克</p>
							<span class="price">¥6.75 </span>
						</div>
						<i class="iconfont icon-shoucang"></i>
					</div>
					<p class="detail-intro-text">新土豆，恩施直供，新鲜、黄心，表皮略带泥土， 无黑心腐烂，单个3两以上，些许偏小。新土豆，恩施直供，新鲜、黄心，表皮略带泥土，无黑心腐烂，单个3两以上，些许偏小新土豆，恩施直供，新鲜、黄心，表皮略带泥土，无黑心腐烂，单个3两以上，些许偏小
					</p>
				</div>

				<div class="detail-operate white-bg">
					<div class="items border-bot">
						<p>数量</p>
						<span class="m-spinner" id="cart-num">
						    <a href="javascript:;" class="cart-num-del"></a>
						    <input type="text" class="J_Input" value="1" placeholder=""/>
						    <a href="javascript:;" class="cart-num-add"></a>
						</span>
					</div>
					<div class="items border-bot">
						<p class="tips-img"><img src="images/tips.png" /></p>
						<i class="iconfont icon-arrow-right"></i>

					</div>
				</div>

				<!--精品推荐-->
				<section class="recommend white-bg">
					<h3 class="tit-style1"><span>相关推荐</span></h3>
					<div class="swiper-container swiper-recom adaptive-w">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<a href="detail.html"><img src="images/recom.png" />
								<p>越南香芒（盒装)</p>
								</a>
							</div>
							<div class="swiper-slide">
								<a href="detail.html"><img src="images/recom.png" /></a>
								<p>越南香芒（盒装)越南香芒（盒装)越南香芒（盒装)</p>
							</div>
							<div class="swiper-slide">
								<a href="detail.html"><img src="images/recom.png" /></a>
								<p>越南香芒（盒装)越南香芒（盒装)越南香芒（盒装)</p>
							</div>
							<div class="swiper-slide">
								<a href="detail.html"><img src="images/recom.png" /></a>
								<p>越南香芒（盒装)越南香芒（盒装)越南香芒（盒装)</p>
							</div>
						</div>
					</div>
				</section>
				<!--精品推荐end-->

			</div>

			<!--底部菜单-->
			<div class="total-bar">
				<div class="to-cart">
					<a href="shopcart.html">
					<i class="iconfont icon-gouwuche1"></i>
					<span>购物车</span>
					<span class="budge">3</span>
					<!--角标-->
					</a>
				</div>
				<div class="add-cart">
					加入购物车
				</div>
			</div>
		</section>
		<script src="js/jquery.min.js"></script>
		<script src="js/ydui.js"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var swiper_banner = new Swiper('.detail-img-box', {
				loop: true,
				pagination: {
					el: '.swiper-pagination',
					clickable: true
				}
			})
			
			//收藏商品
			var $collect=$(".detail-intro-top .iconfont");
			$collect.click(function(){
				$(this).toggleClass('icon-shoucang');
				$(this).toggleClass('icon-shoucang-copy-copy');
				
			})

			//数量加减
			var $cartNum=$(".to-cart .budge"),
				$inputNum=$("#cart-num .J_Input");
			var curCartNum=0;
			$('#cart-num').spinner({
				input: '.J_Input',
				add: '.cart-num-add',
				minus: '.cart-num-del'
			});

			//相关推荐
			var swiper = new Swiper('.swiper-recom', {
				slidesPerView: 3.2,
				spaceBetween: '2.2%',
				freeMode: true
			});
			
			//加入购物车
			var $addCart=$(".add-cart");
			$addCart.on('click',function(){
				var agoCart=$cartNum.text();
				var inputVal=$inputNum.val();
				curCartNum=parseInt(agoCart) + parseInt(inputVal);
				$cartNum.text(curCartNum);
				agoCart=$cartNum.text();
			})
			
		</script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/cart2.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>